<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反馈管理 - 科普小站</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',      // 主色调：科技蓝
                        secondary: '#4f46e5',    // 辅助色：靛蓝色
                        accent: '#0ea5e9',       // 强调色：亮蓝色
                        neutral: '#64748b',      // 中性色：石板灰
                        light: '#f1f5f9',        // 浅色背景
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            .btn-primary {
                @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .feedback-option {
                @apply border border-gray-200 rounded-lg p-4 cursor-pointer transition-all duration-200 hover:border-primary hover:bg-primary/5;
            }
            .feedback-option-selected {
                @apply border-primary bg-primary/10 ring-1 ring-primary/20;
            }
            .badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
            .badge-unresolved {
                @apply bg-red-100 text-red-800;
            }
            .badge-resolved {
                @apply bg-green-100 text-green-800;
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-gray-800">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-flask text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold ml-2">科普小站</h1>
                </a>
            </div>

            <nav class="hidden md:flex items-center space-x-1">
                <a href="#" class="nav-link">首页</a>
                <a href="#" class="nav-link">科普知识</a>
                <a href="#" class="nav-link">互动问答</a>
                <a href="#" class="nav-link">关于我们</a>
                <a href="#" class="nav-link">问题反馈</a>
                <a href="#" class="nav-link nav-link-active font-medium text-primary">管理后台</a>
            </nav>

            <div class="flex items-center">
                <button class="md:hidden text-gray-600 mr-4" id="menu-toggle">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <div class="hidden md:flex items-center">
                    <div class="relative">
                        <div class="flex items-center cursor-pointer group">
                            <i class="fa fa-user-circle-o text-gray-600 text-xl mr-2"></i>
                            <span class="font-medium">管理员</span>
                            <i class="fa fa-angle-down ml-1 text-gray-500 group-hover:rotate-180 transition-transform"></i>

                            <!-- 下拉菜单 -->
                            <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fa fa-user mr-2"></i>个人资料
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fa fa-cog mr-2"></i>设置
                                </a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 移动端菜单 -->
<div class="fixed inset-0 bg-white z-40 transform translate-x-full transition-transform duration-300 md:hidden" id="mobile-menu">
    <div class="p-4 border-b flex justify-between items-center">
        <h2 class="text-xl font-bold">菜单</h2>
        <button id="menu-close"><i class="fa fa-times"></i></button>
    </div>
    <div class="p-4 space-y-3">
        <a href="#" class="block py-2 hover:text-primary">首页</a>
        <a href="#" class="block py-2 hover:text-primary">科普知识</a>
        <a href="#" class="block py-2 hover:text-primary">互动问答</a>
        <a href="#" class="block py-2 hover:text-primary">关于我们</a>
        <a href="#" class="block py-2 hover:text-primary">问题反馈</a>
        <a href="#" class="block py-2 text-primary font-medium">管理后台</a>
        <div class="border-t border-gray-200 my-2 pt-2">
            <div class="flex items-center px-2 py-1">
                <i class="fa fa-user-circle-o text-gray-600 text-xl mr-2"></i>
                <span class="font-medium">管理员</span>
            </div>
            <a href="#" class="block px-4 py-2 text-sm text-red-600">
                <i class="fa fa-sign-out mr-2"></i>退出登录
            </a>
        </div>
    </div>
</div>

<!-- 管理后台侧边栏 -->
<div class="fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-40 w-64 bg-white shadow-lg" id="admin-sidebar">
    <div class="flex flex-col h-full">
        <div class="p-4 border-b">
            <h2 class="text-lg font-semibold">管理后台</h2>
        </div>
        <nav class="flex-1 overflow-y-auto p-4">
            <ul class="space-y-1">
                <li>
                    <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-primary/5 hover:text-primary">
                        <i class="fa fa-tachometer mr-3 text-gray-400 group-hover:text-primary"></i>
                        仪表盘
                    </a>
                </li>
                <li>
                    <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md bg-primary/10 text-primary">
                        <i class="fa fa-comments mr-3"></i>
                        反馈管理
                    </a>
                </li>
                <li>
                    <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-primary/5 hover:text-primary">
                        <i class="fa fa-file-text-o mr-3 text-gray-400 group-hover:text-primary"></i>
                        内容管理
                    </a>
                </li>
                <li>
                    <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-primary/5 hover:text-primary">
                        <i class="fa fa-users mr-3 text-gray-400 group-hover:text-primary"></i>
                        用户管理
                    </a>
                </li>
                <li>
                    <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-primary/5 hover:text-primary">
                        <i class="fa fa-line-chart mr-3 text-gray-400 group-hover:text-primary"></i>
                        数据分析
                    </a>
                </li>
                <li>
                    <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-primary/5 hover:text-primary">
                        <i class="fa fa-cog mr-3 text-gray-400 group-hover:text-primary"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </nav>
        <div class="p-4 border-t">
            <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-200">
                    <i class="fa fa-user-circle-o text-gray-500 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-700">管理员</p>
                    <p class="text-xs text-gray-500">admin@science.example.com</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 遮罩层 -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 z-30 hidden md:hidden" id="sidebar-backdrop"></div>

<!-- 页面内容区 -->
<main class="md:ml-64 min-h-screen">
    <div class="container mx-auto px-4 py-12">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center justify-between mb-8">
                <div>
                    <h2 class="text-3xl font-bold mb-2">反馈管理</h2>
                    <p class="text-gray-600">查看和管理用户提交的反馈</p>
                </div>
                <div class="flex items-center">
                    <button class="text-gray-600 hover:text-gray-900 mr-3 md:hidden" id="sidebar-toggle">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <div class="relative">
                        <button class="flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            <i class="fa fa-filter mr-2 text-gray-500"></i>
                            <span>筛选</span>
                            <i class="fa fa-angle-down ml-2 text-gray-500"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-semibold">反馈列表</h3>
                    <div class="flex space-x-2">
                        <div class="relative">
                            <input type="text" placeholder="搜索反馈..." id="feedback-search" class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 w-full md:w-64">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <select id="feedback-filter" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="all">所有类型</option>
                            <option value="content-error">内容错误</option>
                            <option value="content-suggestion">内容建议</option>
                            <option value="function-problem">功能问题</option>
                            <option value="other">其他问题</option>
                        </select>
                        <select id="status-filter" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="all">所有状态</option>
                            <option value="unresolved">未解决</option>
                            <option value="resolved">已解决</option>
                        </select>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                类型
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                内容摘要
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                提交时间
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                状态
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="feedback-list">
                        <!-- 反馈列表将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>

                <div class="mt-6 flex justify-between items-center">
                    <div class="text-sm text-gray-600">显示 <span id="feedback-count">0</span> 条反馈</div>
                    <div class="flex space-x-2">
                        <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50" id="prev-page" disabled>
                            <i class="fa fa-angle-left mr-1"></i> 上一页
                        </button>
                        <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50" id="next-page" disabled>
                            下一页 <i class="fa fa-angle-right ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12 md:ml-64">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center mb-4">
                    <i class="fa fa-flask text-primary text-2xl"></i>
                    <h3 class="text-xl font-bold ml-2">科普小站</h3>
                </div>
                <p class="text-gray-400 mb-4">致力于传播科学知识，激发探索精神，提升科学素养</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-youtube-play"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">科普知识</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">互动问答</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">问题反馈</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">热门主题</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">宇宙探索</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">生命科学</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">前沿科技</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">环境保护</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">能源研究</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                <ul class="space-y-2">
                    <li class="flex items-start">
                        <i class="fa fa-envelope-o text-gray-400 mr-3 mt-1"></i>
                        <span class="text-gray-400">contact@science.example.com</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-phone text-gray-400 mr-3 mt-1"></i>
                        <span class="text-gray-400">400-123-4567</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-map-marker text-gray-400 mr-3 mt-1"></i>
                        <span class="text-gray-400">北京市海淀区中关村南大街5号</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
            <p>© 2025 科普小站 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>

<script>
    // 移动端菜单控制
    document.getElementById('menu-toggle').addEventListener('click', function() {
        document.getElementById('mobile-menu').classList.remove('translate-x-full');
    });

    document.getElementById('menu-close').addEventListener('click', function() {
        document.getElementById('mobile-menu').classList.add('translate-x-full');
    });

    // 管理后台侧边栏控制
    document.getElementById('sidebar-toggle').addEventListener('click', function() {
        document.getElementById('admin-sidebar').classList.toggle('-translate-x-full');
        document.getElementById('sidebar-backdrop').classList.toggle('hidden');
    });

    document.getElementById('sidebar-backdrop').addEventListener('click', function() {
        document.getElementById('admin-sidebar').classList.add('-translate-x-full');
        this.classList.add('hidden');
    });

    // 分页和过滤参数
    let currentPage = 1;
    let itemsPerPage = 10;
    let filterType = 'all';
    let filterStatus = 'all';
    let searchQuery = '';

    document.addEventListener('DOMContentLoaded', function() {
        loadFeedbacks();

        // 搜索和过滤事件监听
        document.getElementById('feedback-search').addEventListener('input', function() {
            searchQuery = this.value.trim();
            currentPage = 1;
            loadFeedbacks();
        });

        document.getElementById('feedback-filter').addEventListener('change', function() {
            filterType = this.value;
            currentPage = 1;
            loadFeedbacks();
        });

        document.getElementById('status-filter').addEventListener('change', function() {
            filterStatus = this.value;
            currentPage = 1;
            loadFeedbacks();
        });

        // 分页按钮事件监听
        document.getElementById('prev-page').addEventListener('click', function() {
            if (currentPage > 1) {
                currentPage--;
                loadFeedbacks();
            }
        });

        document.getElementById('next-page').addEventListener('click', function() {
            currentPage++;
            loadFeedbacks();
        });
    });

    async function loadFeedbacks() {
        const container = document.getElementById('feedback-list');
        const countElement = document.getElementById('feedback-count');
        const prevButton = document.getElementById('prev-page');
        const nextButton = document.getElementById('next-page');

        try {
            // 显示加载状态
            container.innerHTML = `
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                            <p class="mt-4 text-gray-600">加载反馈中...</p>
                        </td>
                    </tr>
                `;

            // 构建API请求参数
            const params = new URLSearchParams({
                page: currentPage,
                limit: itemsPerPage,
                type: filterType,
                status: filterStatus,
                search: searchQuery
            });

            // 发送请求到后端API
            const response = await fetch(`/api/feedbacks?${params}`);

            if (!response.ok) {
                throw new Error(`加载反馈失败: ${response.statusText}`);
            }

            const result = await response.json();

            if (!result.success || !result.data) {
                throw new Error(result.message || '加载反馈失败，未知错误');
            }

            const feedbacks = result.data.items || [];
            const totalItems = result.data.total || 0;
            const totalPages = Math.ceil(totalItems / itemsPerPage);

            // 更新反馈计数
            countElement.textContent = totalItems;

            // 更新分页按钮状态
            prevButton.disabled = currentPage <= 1;
            nextButton.disabled = currentPage >= totalPages;

            if (feedbacks.length === 0) {
                container.innerHTML = `
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center">
                                <i class="fa fa-inbox text-gray-300 text-5xl mb-4"></i>
                                <p class="text-gray-500">没有找到匹配的反馈</p>
                            </td>
                        </tr>
                    `;
                return;
            }

            // 清空容器并添加反馈项
            container.innerHTML = '';

            feedbacks.forEach(feedback => {
                // 根据反馈类型设置图标和颜色
                let typeIcon, typeColor;
                switch(feedback.type) {
                    case 'content-error':
                        typeIcon = 'fa-exclamation-triangle';
                        typeColor = 'text-red-500';
                        break;
                    case 'content-suggestion':
                        typeIcon = 'fa-lightbulb-o';
                        typeColor = 'text-blue-500';
                        break;
                    case 'function-problem':
                        typeIcon = 'fa-cog';
                        typeColor = 'text-yellow-500';
                        break;
                    default:
                        typeIcon = 'fa-ellipsis-h';
                        typeColor = 'text-gray-500';
                }

                // 格式化时间
                const date = new Date(feedback.timestamp);
                const formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;

                // 截断过长的描述
                let shortDetails = feedback.details;
                if (shortDetails.length > 80) {
                    shortDetails = shortDetails.substring(0, 80) + '...';
                }

                // 确定状态标签
                let statusBadge, statusText;
                if (feedback.resolved) {
                    statusBadge = 'badge-resolved';
                    statusText = '已解决';
                } else {
                    statusBadge = 'badge-unresolved';
                    statusText = '未解决';
                }

                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors';
                row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center">
                                    <i class="fa ${typeIcon} ${typeColor}"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-sm font-medium text-gray-900">${getTypeLabel(feedback.type)}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm text-gray-900">${shortDetails}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">${formattedDate}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="badge ${statusBadge}">${statusText}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button class="text-primary hover:text-primary/80 mr-3 view-feedback" data-id="${feedback.id}">
                                查看
                            </button>
                            ${!feedback.resolved ? `
                            <button class="text-green-600 hover:text-green-900 resolve-feedback" data-id="${feedback.id}">
                                解决
                            </button>
                            ` : ''}
                        </td>
                    `;

                container.appendChild(row);

                // 添加查看详情事件
                row.querySelector('.view-feedback').addEventListener('click', function() {
                    const feedbackId = this.getAttribute('data-id');
                    viewFeedbackDetails(feedbackId);
                });

                // 添加解决反馈事件
                const resolveBtn = row.querySelector('.resolve-feedback');
                if (resolveBtn) {
                    resolveBtn.addEventListener('click', function() {
                        const feedbackId = this.getAttribute('data-id');
                        markFeedbackAsResolved(feedbackId);
                    });
                }
            });
        } catch (error) {
            console.error('加载反馈时出错:', error);
            container.innerHTML = `
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center">
                            <i class="fa fa-exclamation-circle text-red-500 text-5xl mb-4"></i>
                            <p class="text-red-500">加载反馈失败: ${error.message}</p>
                        </td>
                    </tr>
                `;
        }
    }

    async function viewFeedbackDetails(id) {
        try {
            const response = await fetch(`/api/feedback/${id}`);

            if (!response.ok) {
                throw new Error(`获取反馈详情失败: ${response.statusText}`);
            }

            const result = await response.json();

            if (!result.success || !result.data) {
                throw new Error(result.message || '获取反馈详情失败，未知错误');
            }

            const feedback = result.data;

            // 创建模态框
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/50';
            modal.innerHTML = `
                    <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-auto">
                        <div class="p-6 border-b flex justify-between items-center">
                            <h3 class="text-xl font-semibold">反馈详情</h3>
                            <span class="badge ${feedback.resolved ? 'badge-resolved' : 'badge-unresolved'}">
                                ${feedback.resolved ? '已解决' : '未解决'}
                            </span>
                        </div>

                        <div class="p-6">
                            <div class="mb-4">
                                <div class="flex items-center mb-2">
                                    <div class="flex-shrink-0 h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fa ${getTypeIcon(feedback.type)} ${getTypeColor(feedback.type)}"></i>
                                    </div>
                                    <h4 class="text-lg font-medium">${getTypeLabel(feedback.type)}</h4>
                                    <span class="ml-3 text-sm text-gray-500">${new Date(feedback.timestamp).toLocaleString()}</span>
                                </div>

                                <div class="bg-gray-50 p-4 rounded-lg mb-4">
                                    <p class="text-gray-800">${feedback.details}</p>
                                </div>

                                ${feedback.url ? `
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-600 mb-1">相关链接:</h4>
                                    <a href="${feedback.url}" target="_blank" class="text-primary hover:underline">${feedback.url}</a>
                                </div>
                                ` : ''}

                                ${feedback.contact ? `
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-600 mb-1">联系方式:</h4>
                                    <p>${feedback.contact}</p>
                                </div>
                                ` : ''}
                            </div>

                            ${feedback.replies && feedback.replies.length > 0 ? `
                            <div class="border-t pt-4 mt-6">
                                <h4 class="text-lg font-medium mb-4">回复记录</h4>
                                <div class="space-y-4" id="feedback-replies">
                                    ${feedback.replies.map(reply => `
                                    <div class="bg-gray-50 p-4 rounded-lg">
                                        <div class="flex justify-between items-center mb-2">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
                                                    <i class="fa fa-user text-gray-500"></i>
                                                </div>
                                                <div class="ml-3">
                                                    <div class="text-sm font-medium text-gray-900">管理员</div>
                                                    <div class="text-xs text-gray-500">${new Date(reply.timestamp).toLocaleString()}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="text-gray-700">${reply.content}</p>
                                    </div>
                                    `).join('')}
                                </div>
                            </div>
                            ` : ''}

                            <div class="border-t pt-4 mt-6">
                                <h4 class="text-lg font-medium mb-4">回复反馈</h4>
                                <div class="mb-4">
                                    <textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="请输入回复内容..." id="reply-content"></textarea>
                                </div>

                                <div class="flex justify-end space-x-3">
                                    ${!feedback.resolved ? `
        <button class="px-4 py-2 border border-green-500 text-green-500 rounded-lg hover:bg-green-50 transition-colors" id="quick-resolve" data-id="${feedback.id}">
        <i class="fa fa-check mr-1">